<template>
  <el-dialog
    v-dialogDrag
    :visible="popupsVisible"
    :title="titleName"
    center
    width="40%"
    top="2rem"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="closeEdit"
  >
    <dialogHeader slot="title" :title="titleName" :style-type="$store.state.app.dialogType" />
    <div class="filter-container filter-params">
      <!-- 表单组件 -->
      <mix-form
        ref="multipleForm"
        :dynamic-form-fields="dynamicFormFields"
        :dynamic-fields-data="dynamicFieldsData"
      />
      <!-- 按钮组件 -->
      <mix-button
        class="app-common-mar"
        :dynamic-buttons="dynamicButtons"
        :template-type="true"
      />
    </div>
  </el-dialog>
</template>

<script>
import dialogHeader from '@/components/dialogHeader'
import mixForm from '@/components/basicComponent/mixForm'
import mixButton from '@/components/basicComponent/mixButton'
export default {
  components: {
    mixForm,
    mixButton,
    dialogHeader
  },
  props: {
    popupsVisible: {
      type: Boolean,
      default: false
    },
    dataForForm: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      titleName: '驳回原因',
      // 动态组件-查询条件
      dynamicFormFields: [
        {
          compKey: 'compKey1',
          span: 24,
          isComponent: true,
          label: '驳回原因：',
          isRequire: true,
          codeField: 'rejectNote',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          sendCode: () => { },
          focusCode: () => { },
          changeCode: (val) => {
            this.dynamicFieldsData.rejectNote = val
          },
          isMust: true
        }
      ],
      // form 的表单对象
      dynamicFieldsData: {
        rejectNote: '' },
      // 动态组件-按钮
      dynamicButtons: [
        {
          name: 'preservation',
          text: '确定',
          clickEvent: () => this.save(),
          position: 'right',
          isMust: false,
          type: 'primary'
        },
        {
          name: 'reset',
          text: '取消',
          clickEvent: () => this.closeEdit(),
          position: 'right'
        }
      ]
    }
  },
  mounted() {
  },
  methods: {
    // form表单组件每个元素所占栅格栏数每行24格
    spanNum() {
      return 24
    },

    // 关闭弹窗
    closeEdit(type) {
      this.$emit('close', type)
    },

    // 表单数据初始化
    // 保存
    save() {
      if (this.dynamicFieldsData.rejectNote === '') { this.$message('请填写驳回原因'); return }
      this.$emit('save', { obj: this.dynamicFieldsData.rejectNote, ServiceCode: 'rejectStoreMonthSalesPlan', apiUrl: '/mp/e3sh/vesale/planreport/storeMonthSalesPlanAuditService/rejectStoreMonthSalesPlan.do' })
      this.closeEdit('1')
    },

    // 重置
    resetData() {
      const that = this
      this.dynamicFieldsData.forEach((e, i) => {
        that.dynamicFieldsData[e.codeField] = ''
      })
      this.$refs['multipleForm'].$children[0].clearValidate()
    }
  }
}
</script>

